<template>
    <div id="app">
        <router-view ></router-view>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import locationPrompt from './views/film-views/gerLocaltion.js'
export default {
  computed: {
    ...mapState(['currentCity', 'selectLists'])
  },

  beforeMount () {
    console.log('appp组件')
    /**
     *   1, 首次创建，本地没有存储位置， 直接获取本地
     *   2，首次创建，本地存储的位置与实际定位不符，则调用弹出，无论确定 取消，都不再调用，在本地存储code字段，实例销毁时删除；
     */

    // 创建从本地获取定位信息
    let localCity = window.localStorage.getItem('currentCity')

    if (localCity !== null) { // 本地存在
      console.log('本地存在')
      //  初始化筛选数据列表
      this.getSelectList(JSON.parse(localCity))
      this.$store.commit('getCurrentCity', JSON.parse(localCity))
      // 弹窗调用
      locationPrompt(this, JSON.parse(localCity))
    } else { // 本地没有
      console.log('本地不存在')
      this.axios('/api/getLocation').then(res => {
        //  初始化筛选数据列表
        this.getSelectList(res.data.data)
        this.$store.commit('getCurrentCity', res.data.data)
      })
    }
  },
  methods: {
    getSelectList (currentCity) {
      // 初始化筛选数据
      let selectLists = {
        offset: 0,
        limit: 20,
        districtId: -1,
        lineId: -1,
        hallTypeId: -1,
        brandId: -1,
        serviceId: -1,
        areaId: -1,
        stationId: -1,
        areaId: -1,
        updateShowDay: true,
        cityId: currentCity.id ? currentCity.id : ''
      }
      this.$store.commit('getSelectLists', selectLists)
    }
  }
}
</script>
<style>

  *{
    margin: 0;
    padding:0;
    box-sizing: border-box;
  }
  html, body {
      height: 100%;
      width: 100%;
  }
  #app{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
</style>
